<!--
author: 何其沆(pooky)
desc: 年度列表
date: 2021-11-18
-->
<template>
  <div class="statistics-table-right">
    <columnItem title="Yearly Tasks" :data="yData[0]" />
    <columnItem title="Q1" :data="yData[3]" />
    <columnItem title="Q1(%)" :data="yData[4]" />
    <columnItem title="Q2" :data="yData[5]" />
    <columnItem title="Q2(%)" :data="yData[6]" />
    <columnItem title="Q3" :data="yData[7]" />
    <columnItem title="Q3(%)" :data="yData[8]" />
    <columnItem title="Q4" :data="yData[9]" />
    <columnItem title="Q4(%)" :data="yData[10]" />
    <columnItem title="Yearly Total" :data="yData[1]" />
    <columnItem title="Yearly Total(%)" :data="yData[2]" />
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useStore } from 'vuex'
import columnItem from './columnItem.vue'
const store = useStore()
const yData = ref([])
/**
 * 年数据
 * @type {ComputedRef<[]|*>}
 */
const yearData = ref(
  computed(() => {
    return store.state.pm.yearData
  })
)
/**
 * 监听数据变化
 */
watch(
  yearData,
  newValue => {
    const a1 = []
    const a2 = []
    const a3 = []
    const a4 = []
    const a5 = []
    const a6 = []
    const a7 = []
    const a8 = []
    const a9 = []
    const a10 = []
    const a11 = []
    yData.value = []
    if (newValue.data.phaseData) {
      for (let i = 0; i < newValue.data.phaseData.length; i++) {
        const res = newValue.data.phaseData[i]
        a1.push(res.tasks)
        a2.push(res.total)
        a3.push(res.totalCompletion)
        for (let j = 0; j < res.phaseResultData.length; j++) {
          if (res.phaseResultData[j].name === 'Q1') {
            a4.push(res.phaseResultData[j].result)
            a5.push(res.phaseResultData[j].completion)
          } else if (res.phaseResultData[j].name === 'Q2') {
            a6.push(res.phaseResultData[j].result)
            a7.push(res.phaseResultData[j].completion)
          } else if (res.phaseResultData[j].name === 'Q3') {
            a8.push(res.phaseResultData[j].result)
            a9.push(res.phaseResultData[j].completion)
          } else if (res.phaseResultData[j].name === 'Q4') {
            a10.push(res.phaseResultData[j].result)
            a11.push(res.phaseResultData[j].completion)
          }
        }
      }
    }
    yData.value.push(a1)
    yData.value.push(a2)
    yData.value.push(a3)
    yData.value.push(a4)
    yData.value.push(a5)
    yData.value.push(a6)
    yData.value.push(a7)
    yData.value.push(a8)
    yData.value.push(a9)
    yData.value.push(a10)
    yData.value.push(a11)
  },
  {
    deep: true
  }
)
</script>

<style scoped lang="less">
.statistics-table-right {
  flex: 1;
  display: flex;
}
</style>
